<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { updateUserApi, queryInfoApi } from '@/api/user';

//性别列表数据
const genders = ref([{ name: '男', value: 1 }, { name: '女', value: 2 }])
const userFormRef = ref();
// 用户信息表单
const userForm = ref({
  username: '',
  name: '',
  gender: '',
  phone: ''
})

// 表单验证规则
const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
  ]
};

// 获取用户信息
const getUserInfo = async () => {
  try {
    const loginUserStr = localStorage.getItem('loginUser');
    if (!loginUserStr) {
      ElMessage.error('请先登录');
      return;
    }
    
    const loginUser = JSON.parse(loginUserStr);
    const result = await queryInfoApi(loginUser.id)
    userForm.value = result.data
    console.log('获取用户信息成功:', userForm.value);

  } catch (error) {
    console.error('获取用户信息失败:', error);
    ElMessage.error('获取用户信息失败');
  }
}

// 保存修改
const handleSubmit = async () => {
  try {
    await userFormRef.value.validate();
    const result = await updateUserApi(userForm.value)
    if (result.code) {
      ElMessage.success('修改成功');
      getUserInfo(); // 重置为原始数据
      const loginUserStr = localStorage.getItem('loginUser');
      // console.log('打印字符串:', loginUserStr);
      const loginUser = JSON.parse(loginUserStr);
      // console.log('打印对象1:', loginUser);
      loginUser.name = userForm.value.name;
      // console.log('打印对象2:', loginUser);
      const l = JSON.stringify(loginUser);
      // console.log('打印字符串1:', l);
      localStorage.setItem('loginUser', l);
      // console.log('打印字符串2:', localStorage.getItem('loginUser'));
      window.location.reload();//自动刷新页面


    } else {
      ElMessage.error(result.msg);
    }
  } catch (error) {
    console.error('修改失败:', error);
  }

}

// 取消修改
const handleCancel = () => {
  getUserInfo(); // 重置为原始数据
};

// 页面加载时获取用户信息
onMounted(() => {
  getUserInfo();
});
</script>

<template>
  <div class="personal-center">
    <h2>个人中心</h2>
    <el-form :model="userForm" :rules="rules" ref="userFormRef" label-width="120px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userForm.username" disabled></el-input>
      </el-form-item>
      
      <el-form-item label="姓名" prop="name">
        <el-input v-model="userForm.name"></el-input>
      </el-form-item>
      
      <el-form-item label="性别" prop="gender">
        <el-select v-model="userForm.gender" placeholder="请选择性别" style="width: 100%;">
        <el-option v-for="gender in genders" :key="gender.name" :label="gender.name" :value="gender.value"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="userForm.phone"></el-input>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">保存修改</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.personal-center {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.personal-center h2 {
  margin-bottom: 20px;
  color: #303133;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-button {
  margin-right: 10px;
}
</style>